<template>
	<view class="index-page">
		<scroll-view scroll-y="true">
			<div class="head"
				:style="{'background-image': `url(${renderData.bg&&renderData.bg.length&&renderData.bg[0].url})`}">
				<statusBarHeight></statusBarHeight>
				<div class="title">
					<div class="more" @click='goControl'>
						<uni-icons type="bars" size="20" color="#fff"></uni-icons>
					</div>
					<div class="search">
						<uni-icons type="search" size="20" color="#fff"></uni-icons>
					</div>
					<div class="people">
						<div class="icon-user">
							<uni-icons type="staff" size="20" color="#fff"></uni-icons>
						</div>
						<span>新访客</span>
						<span class="visitor">{{renderData.visitor|countTransformString}}</span>
					</div>
				</div>
				<div class="box">
					<div class="avatar">
						<image :src="renderData.avatar&&renderData.avatar.length&&renderData.avatar[0].url"
							mode="aspectFill" class="img"></image>
					</div>
					<div class="info">
						<div class="name">{{renderData.name}}</div>
						<div class="uuid">
							<span>抖音号:</span>
							<span class='id'>{{renderData.id}}</span>
							<span class='icon-code'>
								<uni-icons type="scan" size="16" color="rgba(255,255,255,.5)"></uni-icons>
							</span>
						</div>
					</div>
				</div>
			</div>
			<div class="body">
				<div class="statistics">
					<div class="item">
						<span class='num'>{{renderData.liked|countTransformString}}</span>
						<span>获赞</span>
					</div>
					<div class="item">
						<span class='num'>{{renderData.friend|countTransformString}}</span>
						<span>朋友</span>
					</div>
					<div class="item">
						<span class='num'>{{renderData.concern|countTransformString}}</span>
						<span>关注</span>
					</div>
					<div class="item">
						<span class='num'>{{renderData.follower|countTransformString}}</span>
						<span>粉丝</span>
					</div>
				</div>
				<div class="desc" v-html="renderData.desc"></div>
				<div class="tag-list">
					<div class="item" v-for="(item, index) in renderData.tags" :key="index"
						:style="{color:item.color?item.color:'#656565','background-color':item.bgColor?item.bgColor:'#f5f5f5'}">
						<span class='text'>{{item.text}}</span>
					</div>
				</div>
				<div class="link-list">
					<div class="item">
						<div class="icon">
							<image src="/static/index/card.png" mode="widthFix" class="img"></image>
						</div>
						<div class="text">
							<div class="top">
								抖音商城
							</div>
							<div class="bottom">
								待收货 <span class='num'>1</span>
							</div>
						</div>
					</div>
					<div class="item" @click='goWindow'>
						<div class="icon">
							<image src="/static/index/shop.png" mode="widthFix" class="img"></image>
						</div>
						<div class="text">
							<div class="top">
								商品橱窗
							</div>
							<div class="bottom">
								进入商品管理
							</div>
						</div>
					</div>
				</div>
				<div class="btn-list">
					<div class="item">
						编辑资料
					</div>
					<div class="item">
						添加朋友
					</div>
				</div>
				<div class="tabTitle-list">
					<div class="item actived">
						<span class='text'>作品</span>
					</div>
					<div class="item">
						<span class='text'>私密</span>
					</div>
					<div class="item">
						<span class='text'>收藏</span>
					</div>
					<div class="item">
						<span class='text'>被@</span>
					</div>
					<div class="item">
						<span class='text'>喜欢</span>
					</div>
				</div>
				<div class="tabContent-list">
					<div class="item" v-for="(item, index) in renderData.tabsContents" :key="index">
						<image :src="item.src[0].url" mode="aspectFill" class="img"></image>
						<div class="num">
							<div class="icon">
								<u-icon name="play-right" color="#fff"></u-icon>
							</div>
							<span class='text'>{{item.count|countTransformString}}</span>
						</div>
					</div>
				</div>
			</div>
		</scroll-view>
		<tabBar :count="renderData.msgCount" v-if="!isDisplay"></tabBar>
	</view>
</template>

<script>
	import statusBarHeight from "@/components/statusBarHeight.vue"
	import tabBar from "@/components/tabBar.vue"
	import {
		dataBaseMixin
	} from "@/mixins/dataBaseMixin.js"
	export default {
		mixins: [dataBaseMixin],
		props: {
			isDisplay: {
				type: Boolean,
				default: false,
			},
			configureData: {
				type: Object,
			},
		},
		components: {
			statusBarHeight,
			tabBar,
		},
		data() {
			return {
				data: {}
			}
		},
		computed: {
			renderData() {
				if (this.isDisplay) {
					// console.log(this.configureData);
					return this.configureData
				}
				// console.log(this.data);
				return this.data
			},
		},
		onLoad() {
			this.getData('indexData')
		},
		methods: {
			goWindow() {
				if (this.isDisplay) return
				uni.navigateTo({
					url: '/pages/window/window'
				})
			},
			goControl() {
				if (this.isDisplay) return
				uni.navigateTo({
					url: '/pages/control/control'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-page {
		background-color: #fff;

		.head {
			height: 260px;
			background-size: auto 100%;
			background-repeat: no-repeat;
			background-position: center;
			background-color: rosybrown;
			position: relative;

			.title {
				height: 50px;
				display: flex;
				align-items: center;
				flex-direction: row-reverse;
				padding: 0 15px;

				.more,
				.search {
					width: 32px;
					height: 32px;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					background-color: rgba(0, 0, 0, .4);
					color: #fff;
					margin-left: 15px;
				}

				.people {
					display: flex;
					align-items: center;
					height: 32px;
					padding: 0 8px;
					border-radius: 16px;
					color: #fff;
					font-size: 12px;
					background-color: rgba(0, 0, 0, .4);

					.icon-user {
						margin-right: 2px;
					}

					.visitor {
						margin-left: 4px;
					}
				}
			}

			.box {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				width: 100%;
				padding: 0 15px 25px;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				&::before {
					content: "";
					display: block;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					top: 0;
					background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, .9));
					filter: blur(2px);
				}

				.avatar {
					width: 110px;
					height: 110px;
					border-radius: 60%;
					background-color: rgba(224, 212, 199, .7);
					padding: 5px;
					overflow: hidden;

					.img {
						height: 100%;
						border-radius: 50%;
						overflow: hidden;
					}
				}

				.info {
					margin-left: 15px;
					flex: 1;

					.name {
						height: 22px;
						color: #fff;
						font-weight: bold;
					}

					.uuid {
						margin-top: 10px;
						color: rgba(255, 255, 255, .5);
						font-size: 12px;
						display: flex;
						align-items: center;

						.id {
							margin: 0 2px;
						}
					}
				}
			}
		}

		.body {
			position: relative;
			bottom: 10px;
			border-radius: 10px;
			// overflow: hidden;
			background-color: #fff;
			padding-bottom: 60px;

			.statistics {
				display: flex;
				height: 52px;
				align-items: center;
				font-size: 12px;
				color: #777;
				padding: 0 15px;
				white-space: nowrap;

				.item {
					height: max-content;
					display: flex;
					align-items: flex-end;
					overflow: hidden;
					margin-right: 15px;

					&:last-of-type {
						margin-right: 0;
					}

					.num {
						position: relative;
						top: 1px;
						color: #222;
						font-weight: bold;
						font-size: 16px;
						margin-right: 2px;
					}
				}


			}

			.desc {
				padding: 0 15px;
				line-height: 20px;
				color: #111113;
				font-size: 12px;
			}

			.tag-list {
				margin-top: 2px;
				display: flex;
				flex-wrap: wrap;
				padding: 0 15px;

				.item {
					font-size: 12px;
					// color: #656565;
					// background-color: #f5f5f5;
					border-radius: 6px;
					overflow: hidden;
					padding: 0 3px;
					height: 22px;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 5px;
					margin-bottom: 5px;

					.text {
						transform: scale(.9);
						letter-spacing: 1px;
					}
				}
			}

			.link-list {
				height: 42px;
				padding: 15px 15px 20px;
				display: flex;

				.item {
					width: 50%;
					display: flex;
					align-items: center;

					.icon {
						margin-right: 10px;
						width: 42px;
						height: 42px;
						border-radius: 6px;
						background-color: #f4f4f4;
						display: flex;
						justify-content: center;
						align-items: center;

						.img {
							width: 20px;
						}
					}

					.text {
						.top {
							color: #252525;
							margin-bottom: 4px;
							font-size: 14px;
						}

						.bottom {
							font-size: 12px;
							color: #777;

							.num {
								margin-left: 2px;
							}
						}
					}
				}
			}

			.btn-list {
				height: 38px;
				display: flex;
				padding: 0 15px;
				justify-content: space-between;

				.item {
					width: 170px;
					height: 38px;
					border-radius: 6px;
					overflow: hidden;
					background-color: #f3f3f3;
					color: #222;
					font-size: 16px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.tabTitle-list {
				margin-top: 20px;
				height: 42px;
				display: flex;
				width: 100%;

				.item {
					width: 20%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #777;
					position: relative;
					flex-shrink: 0;

					&.actived {
						color: #111113;

						.text {
							position: relative;
							right: 4px;
						}

						&::before {
							border-top-color: #111113;
						}

						&::after {
							background-color: #111113;
						}
					}

					&::after {
						content: "";
						display: block;
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						width: 100%;
						height: 2px;
					}

					&::before {
						content: '';
						display: block;
						position: absolute;
						top: 0;
						bottom: 0;
						right: 10px;
						margin: auto;
						width: 0;
						height: 0;
						border: 8px solid transparent;
						border-left-width: 6px;
						border-right-width: 6px;
						border-bottom-width: 0;
					}
				}
			}

			.tabContent-list {
				display: flex;
				flex-wrap: wrap;

				.item {
					width: calc((100% - 4px) / 3);
					height: 168px;
					position: relative;
					margin-top: 2px;
					margin-right: 2px;

					&:nth-of-type(-n + 3) {
						margin-top: 0;
					}

					&:nth-of-type(3n) {
						margin-right: 0;
					}

					.img {
						height: 100%;
					}

					.num {
						position: absolute;
						left: 8px;
						bottom: 8px;
						display: flex;
						color: #fff;
						font-size: 14px;

						.icon {
							margin-right: 2px;
						}

						.text {
							position: relative;
							bottom: 2px;
						}
					}
				}
			}
		}
	}
</style>
